<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图标创建</title>

    <style>
        img {
            position: absolute;
        }
    </style>
</head>

<body>






    <script>// // 点击一次生成一个图片
        // // 4.添加点击事件
        // document.addEventListener("click", function () {

        //     // 1.在内存中创建元素
        //     let img = document.createElement("img")

        //     // 3.设置元素属性
        //     img.setAttribute("src", "/素材/img/QQ.png")

        //     // 2.将元素插入父节点
        //     document.body.appendChild(img)
        // })
    </script>




    <script>// // 在点击位置处生成图片
        // // 4.添加点击事件
        // document.addEventListener("click", function (e) {   //  传入参数e，可以找到鼠标坐标(e.pageX, e.pageY)
        //                                                     //  e.pageX, e.pageY无单位，最后需要手动+"px"

        //     // 1.在内存中创建元素
        //     let img = document.createElement("img")

        //     // 3.设置元素属性
        //     img.setAttribute("src", "/素材/img/QQ.png")
        //     let width = Math.floor(Math.random() * 100) + 2
        //     img.style.width = width + "px"      //  图片大小随机

        //     img.style.left = (e.pageX - width / 2) + "px"   //  图片横坐标跟随鼠标
        //     img.style.top = (e.pageY - width / 2) + "px"    //  图片纵坐标跟随鼠标

        //     // 2.将元素插入父节点
        //     document.body.appendChild(img)
        // })

    </script>




    <script> // // 点击生成图片，定时自动删除
        // // 4.添加点击事件
        // document.addEventListener("click", function (e) {   //  传入参数e，可以找到鼠标坐标(e.pageX, e.pageY)
        //     //  e.pageX, e.pageY无单位，最后需要手动+"px"

        //     // 1.在内存中创建元素
        //     let img = document.createElement("img")

        //     // 3.设置元素属性
        //     img.setAttribute("src", "/素材/img/QQ.png")
        //     let width = Math.floor(Math.random() * 100) + 2
        //     img.style.width = width + "px"      //  图片大小随机

        //     img.style.left = (e.pageX - width / 2) + "px"   //  图片横坐标跟随鼠标
        //     img.style.top = (e.pageY - width / 2) + "px"    //  图片纵坐标跟随鼠标

        //     // 2.将元素插入父节点
        //     document.body.appendChild(img)


        //     // 定时删除
        //     setTimeout(function () {
        //         img.remove()
        //     }, 1000)
        // })

    </script>



    <script>// // 鼠标拖尾效果
        // // 4.添加点击事件
        // document.addEventListener("mousemove", function (e) {   //  传入参数e，可以找到鼠标坐标(e.pageX, e.pageY)
        //     //  e.pageX, e.pageY无单位，最后需要手动+"px"

        //     // 1.在内存中创建元素
        //     let img = document.createElement("img")

        //     // 3.设置元素属性
        //     img.setAttribute("src", "/素材/img/QQ.png")
        //     let width = Math.floor(Math.random() * 100) + 2
        //     img.style.width = width + "px"      //  图片大小随机

        //     img.style.left = (e.pageX - width / 2) + "px"   //  图片横坐标跟随鼠标
        //     img.style.top = (e.pageY - width / 2) + "px"    //  图片纵坐标跟随鼠标

        //     // 2.将元素插入父节点
        //     document.body.appendChild(img)


        //     // 定时删除
        //     setTimeout(function () {
        //         img.remove()
        //     }, 100)
        // })
    </script>

</body>

</html>